<template>
  <div class="wapper">
    <z-header @toggleHandle="toggleHandle1" :collapsed="collapsed"></z-header>
    <main class="main">
      <section class="main-left">
        <vue-scroll :ops="ops">
        <Sider
          hide-trigger
          collapsible
          :width="200"
          height="100%"
          :collapsed-width="0"
          v-model="collapsed"
          class="left-sider"
        >
          <z-slide :menuList="menuList" @getMenu="getMenu"></z-slide>
        </Sider>
        </vue-scroll>
      </section>
      <section class="main-right">
        <section class="bread-crumb">
          <z-bread-crumb :home="homeUrl" :oneMenu="oneMenu" :twoMenu="twoMenu"></z-bread-crumb>
        </section>
        <article>
          <router-view></router-view>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
import ZSlide from '_c/slide'
import ZHeader from '_c/header'
import ZBreadCrumb from '_c/bread-crumb'
import { getScroll, getRouter} from '@/utils'
import { mapActions } from 'vuex'
export default {
  components: {
    ZSlide,
    ZHeader,
    ZBreadCrumb
  },
  created() {
    this.getMenus()
  },
  data () {
    return {
      homeUrl: '/home',
      oneMenu: '文件管理',
      twoMenu: '菜单管理',
      collapsed: false,
      menuList: []
    }
  },
  methods: {
    ...mapActions([
      'handleMenus'
    ]),
    toggleHandle1 (status) {
      this.collapsed = status
    },
    getMenus () {
      this.handleMenus().then( res => {
        this.menuList = res
        const routes = []
        getRouter(routes, this.menuList)// 将后台的路由数据components转化成组件
        this.$router.addRoutes(routes)// 添加路由
      })
    },
    getMenu(name) {
      this.twoMenu = name
    }
  },
  computed: {
    ops () {
      return getScroll()
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
